<style lang="scss">
/* 封面图下移效果 */
@keyframes slidedown {
  0% {
    opacity: 0.3;
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}


.slidedown {
  animation: slidedown 1s;
}

/* 内容上移效果 */
@keyframes slideup {
  0% {
    opacity: 0.3;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.slideup {
  animation: slideup 1s;
}

.banner {
  height: 400px;
  background-image: url(@/assets/bg5.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  color: #eee;

  .banner-content {
    position: absolute;
    bottom: 25%;
    width: 100%;
    text-align: center;
    text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);

    height: 108px;
    font-size: 30px;
    letter-spacing: 0.3em;

  }
}

textarea {
  outline: none;
  border: none;
  background: #f1f2f3;
  resize: none;
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 16px;
  color: #333333;
}

.height80 {
  height: 80px !important;
}

.comment-wrapper {
  // border: 1px solid red;
  max-width: 1000px;
  margin: 40px auto;
  background: #fff;
  padding: 40px 30px;
  border-radius: 10px;

  color: #90949e;

  .comment-header {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    padding: 0 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    i {
      color: #90949e;
      margin-right: 5px;
      font-size: 20px;
    }
  }



}
</style>

<template>
  <div>
    <navbar />
    <div class="banner slidedown">
      <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(5px);"></div>
      <div class="banner-content">
        <div>
          评论
        </div>
      </div>
    </div>

    <div class="comment-wrapper  shadow slideup">
      <div class="comment-header">
        <i class="iconfont icon-pinglun1"></i>
        评论
        <el-button @click="switchUser(1)">用户id1-zzhua195</el-button>
        <el-button @click="switchUser(2)">用户id2-ls</el-button>
        <el-button @click="switchUser(3)">用户id3-zj</el-button>
      </div>

      <!-- 主评论表情输入框 -->
      <emoji-text @comment="comment" :emojiSize="20"></emoji-text>

      <!-- 此处为渲染 评论列表, (所有的一级评论渲染列表) -->
      <!-- 还有一个比较麻烦的一点：每个一级评论的最下面都有一个评论输入框，
                                 当点击这个一级评论的回复或者这个一级评论的任一子评论的回复时，
                                 应当把其它一级评论下的输入框给隐藏掉。
           因此, 必须要能拿到所有的Reply, 并且需要知道哪个不关闭(其它的都要关掉), 所以用ref和标记index解决
           所以, 只能在父组件中收集所有的Reply, 然后子组件告诉父组件如何操作。
           在风宇博客中, 他是直接通过$ref拿到所有的子组件后, 通过子组件的$el属性, 通过修改$el属性的display来隐藏元素的 -->
      <!-- 把当前主评论的id给到子组件的parentId属性 -->
      <Reply ref="commentReplyRef"  @closeOtherCommentBoxExcept="closeOtherCommentBoxExcept" :index="idx" v-for="(reply, idx) in replyList" :key="idx" :reply="reply"/>
    </div>

  </div>
</template>

<script>
import Talk from '@/components/Talk/Talk'
import Navbar from './Navbar.vue';
import EmojiText from '@/components/EmojiText/EmojiText'
import Reply from '@/components/Reply/Reply'

import {getCommentListByPage,addComment} from '@/api/commentApi';

export default {
  name: 'Comment',
  data() {
    return {
      replyList:[]
    }
  },
  mounted() {
    /* 加载评论数据 */
    getCommentListByPage({pageNum:1,pageSize:100}).then(res=>{
      this.replyList = res.list
    })
  },
  methods: {
    /* 添加评论 */
    comment(content) {
      addComment({
        userId:localStorage.getItem("userId"),
        commentContent:content,
      }).then(res=>{
        this.replyList.splice(0,0,res)
        this.$toast('success','评论成功')
      })
    },
    /* 模拟不同用户 */
    switchUser(userId) {
      localStorage.setItem("userId",userId)
      this.$toast('success', `切换userId ${userId} 成功`)
    },
    /* 关闭其它一级评论的评论框 */
    closeOtherCommentBoxExcept(index) {
      /* 根据索引, 关闭其它的输入框, 除了指定的输入框外 */
      this.$refs['commentReplyRef'].forEach((commentReplyRef,idx)=>{
        if(index != idx) {
          commentReplyRef.hideCommentBox()
        }
      })
    }
  },
  watch: {

  },
  components: {
    Talk,
    Navbar,
    EmojiText,
    Reply
  }
}
</script>
